<template>
  <div class="login-form-wrapper">
    <el-form
      ref="LoginFormRef"
      :model="form"
      :rules="rules"
      label-position="top"
      size="large"
    >
      <div class="login-form-title">登录</div>
      <el-form-item label="用户名" prop="username">
        <el-input 
          v-model="form.username" 
          placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input 
          v-model="form.password" 
          type="password"
          show-password
          placeholder="请输入密码"/>
      </el-form-item>
      <el-button 
        type="primary" 
        @click="onLogin"
        :loading= loading
        style="width: 100%;"
      >
        登录
      </el-button>
    </el-form>
  </div>
</template>


<script setup lang="ts" name="">
  import { h, ref, reactive } from 'vue'
  import { ElForm, ElFormItem, ElInput, FormRules, ElSelect, ElCascader, ElDatePicker, ElButton, ElTooltip } from "element-plus";
  import { Icon } from '@/components'
  import { loginApi, isLoginApi } from '@/api/system/user'
  import { LoginParams } from '@/api/system/user/types'
  import { useUserStore } from '@/store/modules/user'

  const userStore = useUserStore()
  
  const LoginFormRef = ref<InstanceType<typeof ElForm>>()
  const loading = ref(false)

  const form = ref<LoginParams>({
    username: '',
    password: ''
  })

  const rules = reactive<FormRules<LoginParams>>({
    username: [
      { required:true, message: '请输入用户名' }
    ],
    password: [
      { required:true, message: '请输入密码' }
    ],
  })



  const onLogin = () => {
    LoginFormRef.value.validate(async valid => {
      if (valid) {
        loading.value = true
        try {
            await userStore.login(form.value)
        } finally {
          loading.value = false
        }
      }
    })
  }

</script>